<template>
  <div class="contribution">
    <c-title :text="text"></c-title>
    <div class="head">
      <div class="between mb-26">
        <span>{{ text }}</span><span>{{ contribution }}</span>
      </div>
      <div class="between">
        <span>累计分红金额</span><span>{{ amounts }}</span>
      </div>
    </div>
    <van-tabs v-model="active" @click="handle">
      <van-tab :title="text + '记录'">
        <van-cell-group>
          <van-cell v-for="item in list" :key="item.id" value-class="fz-28 main-color" :title="item.change_name"
            :value="item.amounts > 0 ? `+${item.amounts}` : item.amounts" :label="item.created_at"
            title-style="text-align:left;font-size:0.75rem;" label-class="fz-24" />
        </van-cell-group>
      </van-tab>
      <van-tab title="分红记录">
        <van-cell-group>
          <van-cell v-for="item in reward_list" :key="item.id" value-class="fz-28 main-color" :title="'分红ID：' + item.id"
            title-style="text-align:left;font-size:0.75rem;" label-class="fz-24">
            <div slot="label">
              <div>个人{{ text }}:{{ item.self }}</div>
              <div style="margin-top: 0.25rem;">每个{{ text }}价值:{{ item.price }}</div>
            </div>
            <div slot="default">
              <p style="font-size: 0.75rem;">{{ item.amounts > 0 ? `+${item.amounts}` : item.amounts }}</p>
              <p class="fz-24 c-EEEEEE">{{ item.created_at }}</p>
            </div>
          </van-cell>
        </van-cell-group>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { scrollMixin } from "../../utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      text: "",
      active: 0,
      page: 1,
      total_page: 1,
      isLoadMore: true,
      list: [],
      reward_list: [],
      amounts: 0,
      contribution: 0,


    };
  },
  activated() {
    this.$route.meta.foot = true;
    this.$emit("changeFoot", this.$route.meta.foot);
    this.isLoadMore = true;
    this.getData();
  },
  methods: {
    handle() {
      this.getData();
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return
      }
      let page = this.page + 1;
      this.getData(page);
    },
    getData(page = 1) {
      let url = "plugin.contribution.frontend.controllers.center.change";
      if (this.active !== 0) {
        url = 'plugin.contribution.frontend.controllers.center.rewards';
      }
      $http.get(url, { page }, "").then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg);
        }
        this.isLoadMore = true;
        let { info, list } = res.data;
        this.fun.setWXTitle(info.name);
        this.text = info.name;
        this.amounts = info.amounts;
        this.contribution = info.contribution;
        if (this.active == 0) {
          this.list = (page == 1) ? list.data : this.list.concat(list.data);
        } else {
          this.reward_list = (page == 1) ? list.data : this.reward_list.concat(list.data);
        }
        this.page = list.current_page;
        this.total_page = list.last_page;
      })
    },
  }
};
</script>

<style scoped lang="scss">
.contribution {
  .c-EEEEEE {
    color: #969799;
  }

  .fz-24 {
    font-size: 0.75rem;
  }

  .fz-28 {
    font-size: 0.875rem;
  }

  .main-color {
    color: #101010;
  }

  .head {
    background: #fff;
    margin-bottom: 0.625rem;
    padding: 0.6875rem;
    box-sizing: border-box;
  }

  .mb-26 {
    margin-bottom: 0.8125rem;
  }

  .between {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
